<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>在线考试系统</title>
    <link rel="shortcut icon" th:href="@{/static/favicon.ico}" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <!--[if lt IE 8]>
    <meta http-equiv="refresh" content="0;ie.html" />
    <![endif]-->
    <link th:href="@{/static/css/ui.css}" rel="stylesheet">
    <link th:href="@{/static/css/style.css}" rel="stylesheet">
    <link th:href="@{/static/css/style-list.min.css?v=4.0.0}" rel="stylesheet">
    <link th:href="@{/static/css/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/static/css/font-awesome.min.css}" rel="stylesheet">
    <link th:href="@{/static/css/bootstrap-table.css}" rel="stylesheet">
    <link th:href="@{/static/css/animate.min.css}" rel="stylesheet">
    <link th:href="@{/static/css/admin.css}" rel="stylesheet">
    <link th:href="@{/static/css/bootstrap-datetimepicker.min.css}" rel="stylesheet" />
    <link  th:href="@{/static/js/dist/jquery.validator.css}" rel="stylesheet" />
    <style>
        td{background-color: #fff;}
    </style>
</head>
<body class="gray-bg">
<form id="form" class="form-horizontal" role="form" enctype="multipart/form-data"  th:method="post" th:action="@{./submit}">
    <input type="hidden" name="id" th:if="${questionVo!=null}" th:value="${questionVo?.id}"/>
    <input type="hidden" name="id" th:if="${questionVo==null}" value=""/>
    <div id="imagePreview" class="form-group" align="center">
    </div>
    <div class="form-group">
        <label class="control-label col-sm-3">所属题库</label>
        <div class="col-sm-7">
            <select class="form-control"  name="qdbId"  id="qdbId" data-rule="required;" >
                <option value="">无</option>
            </select>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-sm-3">试题类型</label>
        <div class="col-sm-7">
            <select class="form-control"  name="qType"  id="qType" data-rule="required;" >
            </select>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-sm-3">试题难度</label>
        <div class="col-sm-7">
            <select class="form-control"  name="qLevel" d  id="qLevel" data-rule="required;" >
            </select>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-sm-3">试题状态</label>
        <div class="col-sm-7">
            <select class="form-control" name="qStatus" id="qStatus" data-rule="required;">
                <option value="0">开放</option>
                <option value="1">关闭</option>
            </select>
            <span class="help-block m-b-none"><i class="fa fa-info-circle"></i><span id="qStatusInfo"></span></span>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-sm-3">试题题干</label>
        <div class="col-sm-7">
            <textarea  class="form-control" th:if="${questionVo==null}" style="height: 200px;" data-rule="required;" id="qContent" name="qContent" ></textarea>
            <textarea  class="form-control" th:if="${questionVo!=null}" style="height: 200px;" data-rule="required;" id="qContent" name="qContent" th:inline="text">[[${questionVo?.qContent}]]</textarea>
        </div>
    </div>
    <div class="form-group" id="opt">
    </div>
    <div class="form-group">
        <label class="control-label col-sm-3">试题解析</label>
        <div class="col-sm-7">
            <textarea  class="form-control" th:if="${questionVo==null}" style="height: 200px;" data-rule="required;" placeholder="没有请填无" name="keyInfo">无</textarea>
            <textarea  class="form-control" th:if="${questionVo!=null}" style="height: 200px;" data-rule="required;" placeholder="没有请填无" name="keyInfo" th:inline="text">[[${questionVo?.keyInfo}]]</textarea>
        </div>
    </div>
    <div class="form-group" >
        <div class="col-sm-7 col-sm-offset-3">
            <button class="btn btn-primary" type="button" onclick="submitForm()">保存内容</button>
            <button class="btn btn-white" type="reset">取消</button>
        </div>
    </div>
</form>
<script th:src="@{/static/js/jquery-3.3.1.min.js}" type="text/javascript" charset="utf-8"></script>
<script th:src="@{/static/js/bootstrap.min.js}" type="text/javascript" charset="utf-8"></script>
<script th:src="@{/static/js/bootstrap-table.min.js}" type="text/javascript" charset="utf-8"></script>
<script th:src="@{/static/js/bootstrap-table-editable.min.js}" type="text/javascript" charset="utf-8"></script>
<script th:src="@{/static/js/bootstrap-table-zh-CN.min.js}" type="text/javascript" charset="utf-8"></script>
<script th:src="@{/static/js/layer/layer.js}" type="text/javascript" charset="utf-8"></script>
<script th:src="@{/static/js/bootstrap-editable.min.js}" type="text/javascript" charset="utf-8"></script>
<script  th:src="@{/static/js/bootstrap-datetimepicker.min.js}"></script>
<script  th:src="@{/static/js/bootstrap-datetimepicker.zh-CN.js}"></script>
<script  th:src="@{/static/js/dist/jquery.validator.min.js}"></script>
<script  th:src="@{/static/js/dist/local/zh-CN.js}"></script>
<script  th:src="@{/static/js/opt.js}"></script>
<script  th:inline="javascript">
    /*<![CDATA[*/
    var qdbs = [[${qdbs}]];
    if(qdbs!=null){
        for(var i=0;i<qdbs.length;i++){
            var qdb=qdbs[i];
            $('#qdbId').append("<option  value='"+qdb.id+"'>"+qdb.qdbName+"</option>");
        }
    }
    var types = [[${types}]];
    if(types!=null){
        for(var i=0;i<types.length;i++){
            var type=types[i];
            $('#qType').append("<option  value='"+type.id+"'>"+type.value+"</option>");
        }
    }
    var levels = [[${levels}]];
    if(levels!=null){
        for(var i=0;i<levels.length;i++){
            var level=levels[i];
            $('#qLevel').append("<option  value='"+level.id+"'>"+level.value+"</option>");
        }
    }
    var questionVo = [[${questionVo}]];
    if(questionVo!=null){
        var qType = [[${qType}]];
        var qLevel = [[${qLevel}]];
        $("#qdbId option[value='"+questionVo.qdbId+"']").attr("selected", true);
        $("#qType option[value='"+qType.id+"']").attr("selected", true);
        $("#qLevel option[value='"+qLevel.id+"']").attr("selected", true);
        $("#qLevel option[value='"+questionVo.QStatus+"']").attr("selected", true);
        qStatusInfo(questionVo.QStatus);
        optTable(qType.id,questionVo.opts,questionVo.optKey);
        $("#qType").attr("disabled",true);
    }else{
        optTable(1,null,null);
    }
    $(function () {
        $("#qStatus").change(function () {
            var value = $(this).val();
            qStatusInfo(value);
        });
        $("#qType").change(function () {
            var value = $(this).val();
            var msg = confirm("更换后选项会被清空！");
            if(msg==true){
                optTable(value,null,null);
            }else {
                return false;
            }
        });
    })
    function submitForm(){
        $("#qType").removeAttr("disabled");
        var qType = $("#qType option:selected").val();
        var qdbId = $("#qdbId option:selected").val();
        var qLevel = $("#qLevel option:selected").val();
        if(qdbId == null||qdbId==""){
            alert("请选择题库！");
            return;
        }
        if(qLevel == null||qLevel==""){
            alert("请选择难度！");
            return;
        }
        var key="";
        if(qType==1){
            key = $("input[name='q_key']:checked").val();
            if(key == null ||key == ""){
                alert("请选中一项答案！");
                return false;
            }
        }else if(qType==2){
            var len = $("input[name='q_key']:checked").length;
            if(len<=1){
                alert("请至少选中两项答案！");
                return false;
            }
            var id_array=new Array();
            $('input[name="q_key"]:checked').each(function(){
                id_array.push($(this).val());
            });
            key=id_array.join(',');
        }else if(qType==3){
            key = $("input[name='q_key']:checked").val();
            if(key == null ||key == ""){
                alert("请选中一项答案！");
                return false;
            }
        }else if(qType==4){
            var textareaArrs = $("textarea[name='q_key']");
            var id_array=new Array();
            for (var i=0;i<textareaArrs.length;i++){
                id_array.push(textareaArrs.eq(i).val());
            }
            key=id_array.join(',');
        }
        $("#form").append(" <input type=\"hidden\" name=\"optKey\" value='"+key+"'/>");
        $("textarea[name='q_options']").each(function () {
            var value = $(this).val();
            var optId = $(this).attr("optId");
            $(this).val(value+"#&#"+optId);
        });
        $("#form").submit();
    }
    /*]]>*/
</script>
</body>
</html>